<template>
  <div class="app-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <div style="padding: 10px" class="list_container">
      <div class="container">
        <p style="background-color: #ccccccaa; padding: 5px">待审批列表</p>
        <div class="list" v-if="talentList.length > 0">
          <div
            class="listItem"
            v-for="item in talentList"
            :key="item.id"
            @click="handleUpdate(item)"
          >
            <p>{{ item.name }}标准化人员审批</p>
            <span>创建时间：{{ item.createTime }}</span>
          </div>
        </div>
        <div v-else>暂无数据</div>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="725px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        class="talentFrom"
      >
        <el-row>
          <el-col :span="24">
            <div
              style="margin-bottom: 20px; font-weight: bold; text-align: center"
            >
              人员信息
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" disabled placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="form.gender" disabled>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工作单位" prop="workplace">
              <el-input
                v-model="form.workplace"
                disabled
                placeholder="请输入工作单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作时间" disabled prop="workTime">
              <el-date-picker
                v-model="form.workTime"
                type="month"
                placeholder="选择工作时间"
                disabled
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industry">
              <el-input
                v-model="form.industry"
                disabled
                placeholder="请输入所属行业"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务" prop="organizationalRoles">
              <el-input
                v-model="form.organizationalRoles"
                placeholder="请输入职务"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="职称" prop="title" class="formItem">
              <el-input
                v-model="form.title"
                placeholder="请输入职称"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="起草标准" prop="draftingStandard">
              <el-input
                type="textarea"
                maxlength="2000"
                show-word-limit
                disabled
                :autosize="{ minRows: 2, maxRows: 10 }"
                v-model="form.draftingStandard"
                placeholder="请输入起草标准情况"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="领域标准论文" prop="publishedPapers">
              <el-input
                type="textarea"
                maxlength="2000"
                show-word-limit
                disabled
                :autosize="{ minRows: 2, maxRows: 10 }"
                v-model="form.publishedPapers"
                placeholder="请输入内容领域标准论文情况"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="科研项目研究" prop="projectResearch">
              <el-input
                type="textarea"
                maxlength="2000"
                show-word-limit
                disabled
                :autosize="{ minRows: 2, maxRows: 10 }"
                v-model="form.projectResearch"
                placeholder="请输入内容科研项目研究情况"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="编写教材/书籍" prop="authoredBooks">
              <el-input
                type="textarea"
                maxlength="2000"
                show-word-limit
                disabled
                :autosize="{ minRows: 2, maxRows: 10 }"
                v-model="form.authoredBooks"
                placeholder="请输入教材/书籍编写情况"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!fromDisabled">
        <el-button type="primary" @click="submitForm(1)">通 过</el-button>
        <el-button type="primary" @click="submitForm(2)">驳 回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detailsPersonnel } from "@/api/personnel/talent";
import { confirmPage, confirm } from "@/api/confirm";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import PanelGroup from "./dashboard/PanelGroup";
export default {
  name: "Config",
  dicts: ["sys_user_sex"],
  components: {
    PanelGroup,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 参数表格数据
      talentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: "",
        workplace: "",
      },
      // 表单参数
      form: {},
      // 表单校验
      // rules: {
      //   name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
      //   gender: [
      //     { required: true, message: "性别不能为空", trigger: "change" },
      //   ],
      //   workTime: [
      //     { required: true, message: "工作时间不能为空", trigger: "change" },
      //   ],
      //   workplace: [
      //     { required: true, message: "工作单位不能为空", trigger: "blur" },
      //   ],
      //   organizationalRoles: [
      //     { required: true, message: "职务不能为空", trigger: "blur" },
      //   ],
      //   industry: [
      //     { required: true, message: "所属行业不能为空", trigger: "blur" },
      //   ],
      // },
      //性别字典项
      sexDictDatas: getDictDatas(DICT_TYPE.SYSTEM_USER_SEX),
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      confirmPage(this.queryParams).then((res) => {
        this.talentList = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        name: undefined,
        gender: 1,
        workTime: undefined,
        workplace: undefined,
        organizationalRoles: undefined,
        draftingStandard: undefined,
        publishedPapers: undefined,
        projectResearch: undefined,
        authoredBooks: undefined,
        industry: undefined,
        title: undefined,
      };
      this.resetForm("form");
    },
    /** 查看按钮操作 */
    handleDetails(row) {
      detailsPersonnel(row.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "人员详情";
        this.fromDisabled = true;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.fromDisabled = false;
      detailsPersonnel(row.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "人员审核";
      });
    },
    /** 提交按钮 */
    submitForm: function (num) {
      this.$refs["form"].validate((valid) => {
        this.form.workTime = this.$moment(this.form.workTime).format(
          "YYYY-MM-DD"
        );
        if (valid) {
          if (this.form.id != undefined) {
            confirm({ id: this.form.id, status: num }).then((response) => {
              this.$modal.msgSuccess(`审批${num == 1 ? "通过" : "驳回"}`);
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .list_container{
    border-radius: 8px;
    background-color: #90939915;
    .container {
      width: 50%;
      padding: 5px;
      .list{
        padding: 5px;
      }
    }
  }
  .el-table {
    font-size: 12px !important;
  }
}
.talentFrom {
  user-select: none;
}
::v-deep .talentFrom .el-input__inner {
  width: 220px !important;
}
// ::v-deep .talentFrom .el-textarea__inner {
//   width: 580px;
// }
// ::v-deep .formItem .el-input__inner {
//   width: 100% !important;
// }
::v-deep .el-input__count {
  color: #909399;
  background: #fff;
  position: absolute;
  font-size: 10px;
  bottom: 1px;
  right: 10px;
  height: 26px;
}
::v-deep .el-tooltip__popper {
  display: none !important;
}
.text-ellipsis {
  // max-height: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1890ff;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>
